<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图形化分析展示-分级次</title>

    <!--        <style type="text/css">-->
    <!--            #container {-->
    <!--                height: 400px;-->
    <!--            }-->

    <!--            .highcharts-figure, .highcharts-data-table table {-->
    <!--                min-width: 310px;-->
    <!--                max-width: 800px;-->
    <!--                margin: 1em auto;-->
    <!--            }-->

    <!--            .highcharts-data-table table {-->
    <!--                font-family: Verdana, sans-serif;-->
    <!--                border-collapse: collapse;-->
    <!--                border: 1px solid #EBEBEB;-->
    <!--                margin: 10px auto;-->
    <!--                text-align: center;-->
    <!--                width: 100%;-->
    <!--                max-width: 500px;-->
    <!--            }-->

    <!--            .highcharts-data-table caption {-->
    <!--                padding: 1em 0;-->
    <!--                font-size: 1.2em;-->
    <!--                color: #555;-->
    <!--            }-->

    <!--            .highcharts-data-table th {-->
    <!--                font-weight: 600;-->
    <!--                padding: 0.5em;-->
    <!--            }-->

    <!--            .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {-->
    <!--                padding: 0.5em;-->
    <!--            }-->

    <!--            .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {-->
    <!--                background: #f8f8f8;-->
    <!--            }-->

    <!--            .highcharts-data-table tr:hover {-->
    <!--                background: #f1f7ff;-->
    <!--            }-->

    <!--        </style>-->
</head>
<body>


<figure class="highcharts-figure">
    <!--    <div>-->
    <!--        <input class="layui-input" type="text" id="riqi" name="riqi" width="100px">-->
    <!--    </div>-->
    <button class="layui-btn layuiadmin-btn-risk mybtn" lay-filter="LAY-risk-front-search" data-type="mohu"
    >
        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
    </button>
    <input class="layui-input" style="width: 200px;float: left" type="text" id="riqi" name="riqi" width="100px"
           placeholder="请输入要查询的日期" autocomplete="off">


    <!--    <input style="width: 200px;float: left" type="text" onclick=""-->
    <!--           name="riskinfo"-->
    <!--           value="" placeholder="请输入要查询的纳税人名称" autocomplete="off" class="layui-form layui-input">-->
    <div id="container"></div>
</figure>


<script type="text/javascript">
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , $ = layui.$

        laydate.render({     //创建时间选择框
            elem: '#riqi',//指定元素
            trigger: 'click',
            // type:'datetime'
        });

    })
    let myAuthorization = layui.data('layuiAdmin', 'Authorization')
    let jiciData = ''
    $.ajax({
        async: false,    //表示请求是否异步处理
        type: "get",    //请求类型
        url: "./json/bigScreen/demo.js", //请求的 URL地址 http://10.0.23.97:8195/portal/menutree
        dataType: "json",//返回的数据类型
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Authorization", myAuthorization);
        },
        success: function (data) {
            if (data.code === 0) {
                jiciData = data
                // console.log(data)
                // Highcharts.chart('container', {
                //     chart: {
                //         type: 'pie',
                //         options3d: {
                //             enabled: true,
                //             alpha: 45,
                //             beta: 0
                //         }
                //     },
                //     title: {
                //         text: '税收收入分级次结构图'
                //     },
                //     accessibility: {
                //         point: {
                //             valueSuffix: '%'
                //         }
                //     },
                //     tooltip: {
                //         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                //     },
                //     plotOptions: {
                //         pie: {
                //             allowPointSelect: true,
                //             cursor: 'pointer',
                //             depth: 35,
                //             dataLabels: {
                //                 enabled: true,
                //                 format: '{point.name}'
                //             }
                //         }
                //     },
                //     series: [{
                //         type: 'pie',
                //         name: 'Browser share',
                //         data: data
                //     }]
                // });
            }
        },
        error: function (data) {
            // alert(1)

        }
    });
    Highcharts.chart('container', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            },
            height: 550,
            // width:1125
        },
        title: {
            text: '税收收入分级次结构图'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        tooltip: {
            // pointFormat: '{series.name}: <b>{point.percentage:.1f}元</b>'
            pointFormat: '税额: <b>{point.percentage:.1f}元</b>'
        },
        // plotOptions: {
        //     pie: {
        //         allowPointSelect: true,
        //         cursor: 'pointer',
        //         depth: 35,
        //         dataLabels: {
        //             enabled: true,
        //             format: '{point.name}'
        //         }
        //     }
        // },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    color: 'black',
                    enabled: true,
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>:' + this.point.percentage.toFixed(2) + "%";
                    },
                    connectorWidth: 0,
                    connectorPadding: 0,
                    distance: -30
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share' && console.log(jiciData.data),
            data: jiciData.data
        }]
    });
</script>
</body>
</html>
